<template>
  <VueDatePicker v-model="date"
                 @update:model-value="setDate"
                 :format-locale="ja" :format="'yyyy-MM-dd'" :preview-format="'yyyy-MM-dd'"
                 :day-names="['一', '二', '三', '四', '五', '六', '日']"
                 :enable-time-picker="false"
                 class="w-full max-w-xs"></VueDatePicker>
</template>

<script setup>
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
import { ja } from 'date-fns/locale';
import {formatDate} from "../utils/datetools/index.js";
const props = defineProps({
  modelValue: String,
})
const emit = defineEmits(['update:modelValue'])
const date = ref()
date.value = props.modelValue

const setDate = (value) => {
  const tmpDate = formatDate(value)
  console.log(value)
  emit('update:modelValue', tmpDate)
}

</script>

<style scoped>

</style>